<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
<!--
                <el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
-->
                <el-breadcrumb-item>终审列表</el-breadcrumb-item>
            </el-breadcrumb>
       <el-dialog :title="title" :visible.sync="dialogFormVisible" >
          <el-table :data="data1" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column v-if="false"  prop="id" label="id"  width="1">
            </el-table-column>
            <el-table-column v-if="false"  prop="userId" label="userId"  width="1">
            </el-table-column>
            <el-table-column prop="staffId" label="用户编码" style="width: 18%" >
            </el-table-column>
            <el-table-column prop="name" label="用户名称"  style="width: 18%" >
            </el-table-column>
            <el-table-column prop="selfScore" label="自评分"  style="width: 10%" >
            </el-table-column>
            <el-table-column prop="tlScore" label="组长评分"  style="width: 10%" >
            </el-table-column>
            <el-table-column prop="auditScore" label="终审分数"  style="width: 10%" >
            </el-table-column>
            <el-table-column prop="category" label="类别"  style="width: 18%" >
            </el-table-column>
            <el-table-column prop="year" label="年"  style="width: 10%" >
            </el-table-column>
            <el-table-column prop="month" label="月"  style="width: 10%" >
            </el-table-column>
            <el-table-column prop="status" label="状态"  style="width: 10%" >
            </el-table-column>
            <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                    <el-button size="small"
                            @click="audit(scope.$index, scope.row)">终审</el-button>
                    
                </template>
            </el-table-column>
        </el-table>
            </el-dialog>
          <el-dialog title="审核" :visible.sync="dialogAuditScore"  >
             <el-form ref="form" :model="form" label-width="80px">
          
                 <el-form-item label="员工编码">
                    <el-col :span="11">
                      <el-input maxlength="10"  :disabled="true" class="handle-input" v-model="form.staffId"></el-input>
                    </el-col>
                    <el-col class="line" :span="2">用户名称</el-col>
                    <el-col :span="11">
                     <el-input maxlength="30" :disabled="true" class="handle-input" v-model="form.name"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="终审分数">
                   <el-col :span="11">
                    <el-input-number  v-model="form.auditScore" @change="handleChange" :min="0" :max="100"></el-input-number>
                   </el-col>
                   <el-col class="line" :span="2">自评分</el-col>
                   <el-col :span="11">
                     <el-input maxlength="20" :disabled="true" class="handle-input" v-model="form.selfScore"></el-input>
                   </el-col>
                </el-form-item>
            
               <el-form-item label="组长评分">
                    <el-input maxlength="20" :disabled="true" class="handle-input" v-model="form.tlScore"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary"    @click="onSubmit">确认</el-button>
                    <el-button  @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
            </el-dialog>

        </div>
     
        <div class="handle-box">
          
            <el-input v-model="name"  placeholder="用户名称" class="handle-input mr10" icon="circle-close" :on-icon-click="handleIconClick"></el-input>
            <el-date-picker v-model="year"  align="right"  type="year"  placeholder="选择年">

            </el-date-picker>
            <el-select v-model="quarter"  clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.quarter"
                  :label="item.label"
                  :value="item.quarter">
                </el-option>
            </el-select>
            
            <el-button type="primary" icon="search" @click="search">搜索</el-button>
        </div>
      
        <el-table :data="data" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
          
           <el-table-column v-if="false"  prop="userId" label="userId"  width="150">
            </el-table-column>
             <el-table-column prop="staffId" label="用户编码" style="width: 25%" >
                 <template slot-scope='scope'>
                   <a style="border-bottom:solid 1px "  @click="detailed(scope.$index, scope.row)"> {{scope.row.staffId}}</a>
                 </template>
            </el-table-column>
            <el-table-column prop="name" label="用户名称"  style="width: 25%" >
            </el-table-column>
            <el-table-column prop="auditScore" label="终审评分"  style="width: 25%" >
            </el-table-column>
            <el-table-column prop="selfScore" label="自评分"  style="width: 25%" >
            </el-table-column>
            <el-table-column prop="tlScore" label="组长评分"  style="width: 25%" >
            </el-table-column>
            <el-table-column prop="quarter" label="季度"  style="width: 25%" >
            </el-table-column>
            <el-table-column prop="year" label="年"  style="width: 25%" >
            </el-table-column>
         
        </el-table>
        <div class="pagination">
            <el-pagination
                    @current-change ="handleCurrentChange"
                    @size-change="handleSizeChange"
                    layout="sizes,prev, pager, next,total"
                    :page-sizes="[10,20,50]"
                    :page-size="pageSize"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                url: './static/vuetable.json',
                tableData: [],
                tableDataDetailed: [],
                curPage: 1,
                title: '',
                year: '',
                pageSize: 10,
                name:'',
                total:0,
                multipleSelection: [],
                delList: [],
                dialogFormVisible: false,
                dialogAuditScore: false,
                description: '',
                options: [{
                      quarter: '01,03',
                      label: '一季度'
                    }, {
                      quarter: '04,06',
                      label: '二季度'
                    }, {
                      quarter: '07,09',
                      label: '三季度'
                    }, {
                      quarter: '10,12',
                      label: '四季度'
                    }],
                quarter: '',
                form: {
                    id: null,
                    userId:'',
                    staffId:'',
                    auditScore:'',
                    tlScore:'',
                    name: '',
                    selfScore: ''     
                },
                is_search: false
            }
        },
        created(){
            this.getData();
        },
        computed: {
            data(){
                const self = this;
                return self.tableData.filter(function(d){
                    
                    let is_del = false;
                    for (let i = 0; i < self.delList.length; i++) {
                   
                        if(d.name === self.delList[i].name){
                            is_del = true;
                            break;
                        }
                    }
                    return d;
                })
            },
               data1(){
                const self = this;
                return self.tableDataDetailed.filter(function(d){
                    
                    let is_del = false;
                    for (let i = 0; i < self.delList.length; i++) {
                   
                        if(d.name === self.delList[i].name){
                            is_del = true;
                            break;
                        }
                    }
                    return d;
                })
            },
            totalRecord(){
                return this;
            }
        },
        methods: {
            handleCurrentChange(val){
                this.curPage = val;
                this.getData();
            },
              handleSizeChange (val) {
                 this.pageSize = val;
                 this.getData();
           
            },
            detailed(index, row) {
               
               let self = this;
               self.dialogFormVisible = true;
               self.title = "明细";
               var searchCriteria = {};
               searchCriteria.quarter = (self.quarter||'') ;
               searchCriteria.year = (self.year||'');      
               searchCriteria.userId =  row.userId;
                 
                  self.$axios.post("../adm/userAuditScore/additionalScoreDetailed", searchCriteria).then((res) => {
                  self.tableDataDetailed = res.data;
                  
                });
            },
             cancel() {
                let self = this;   
                self.dialogAuditScore = false ;
                             
            },
            handleIconClick(){
                let self = this;
                console.log(123);
                self.name = "";
                console.log(456);
            },
            onSubmit() {
             
              var self = this;          
              if(!self.form.auditScore){
                 this.$message.success('终审评分不可为空');
                 reurn;
              }
              self.$axios({
                method: 'post',
                url: '../adm/userAuditScore/updateAuditScore',
                handleAs:"json",
                headers:{'Content-Type':'application/json'},
                data: JSON.stringify(self.form)
              }).then(function (res) {  
                      if(!res.data){
                          self.$message.success('审核失败，请联系管理员');
                          return;
                       }
                       self.dialogAuditScore = false ;    
                       self.$message.success('审核成功！');
                       self.getData(); 
                       var searchCriteria = {};
                       searchCriteria.quarter = (self.quarter||'') ;
                       searchCriteria.year = (self.year||'');      
                       searchCriteria.userId =  self.form.userId;
                        self.$axios.post("../adm/userAuditScore/additionalScoreDetailed", searchCriteria).then((res) => {
                          self.tableDataDetailed = res.data;
                          
                        });
               }).catch(function (err) {     
               })
          },
            getData(){
                let self = this;
                if(process.env.NODE_ENV === 'development'){
                    self.url = '/ms/table/list';
                };
               var searchCriteria = {};
               searchCriteria.quarter = (self.quarter||'') ;
               searchCriteria.name = '%' + (self.name||'') + '%';
               searchCriteria.year = (self.year||'');              
                
                self.$axios.post("../adm/userAuditScore/page?size="+self.pageSize+"&page="+(self.curPage-1), searchCriteria).then((res) => {
                    self.tableData = res.data;
                    self.total = res.total;   

                });
               
            },
            audit(index, row){

              let self = this;
              self.dialogAuditScore = true;

               var searchCriteria = {};
               searchCriteria.id = row.id ;
               self.$axios.post("../adm/userAuditScore/searchAuditScoreDetailed", searchCriteria).then((res) => {
                 self.form = res.data[0];
                });
            },
            search(){
                
               let self = this;
               var searchCriteria = {};
               searchCriteria.quarter = (self.quarter||'') ;
               searchCriteria.name = '%' + (self.name||'') + '%';
               searchCriteria.year = (self.year||'') ;
               self.curPage = 0;
               self.$axios.post("../adm/userAuditScore/page?size="+self.pageSize+"&page="+self.curPage, searchCriteria).then((res) => {
                    self.tableData = res.data;
                    self.total = res.total;
    
                });
  
               
            },
            formatter(row, column) {
                return row.name;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            
           
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        }
    }
</script>

<style scoped>
.handle-box{
    margin-bottom: 20px;
}
.handle-select{
    width: 180px;
}
.handle-input{
    width: 180px;
    display: inline-block;
}
.input{
    width: 87px;
    display: inline-block;
}
.dialog{
    width: 600px;
    
}
.input2{
    width: 120px;
    display: inline-block;
    height: 100px;
}
</style>
